<template>
  <ph-view>
    <ph-blockquote>{{ paths }}</ph-blockquote>
    <ph-tab type="light">
      <ph-tab-panel title="非树模式">
        <ph-tab>
          <ph-tab-panel title="基本主题案例">
            <ph-flex height="100%" overflow="auto">
              <ph-aside>
                <ph-menu :current="current" @action="onAction">
                  <ph-sub-menu title="浏览器1级">
                    <ph-menu-item action="firefox" icon="firefox"
                      >火狐</ph-menu-item
                    >
                    <ph-menu-item action="safari" icon="safari"
                      >苹果</ph-menu-item
                    >
                    <ph-menu-item
                      action="internet-explorer"
                      icon="internet-explorer"
                      >微软</ph-menu-item
                    >
                  </ph-sub-menu>
                  <ph-menu-item action="firefox" icon="firefox"
                    >火狐</ph-menu-item
                  >
                  <ph-menu-item action="safari" icon="safari"
                    >苹果</ph-menu-item
                  >
                  <ph-menu-item
                    action="internet-explorer"
                    icon="internet-explorer"
                    >微软</ph-menu-item
                  >
                </ph-menu>
              </ph-aside>
              <ph-aside>
                <ph-menu theme="light" :current="current" @action="onAction">
                  <ph-sub-menu title="浏览器">
                    <ph-menu-item action="chrome" icon="chrome"
                      >谷歌</ph-menu-item
                    >
                    <ph-menu-item action="firefox" icon="firefox"
                      >火狐</ph-menu-item
                    >
                    <ph-menu-item action="safari" icon="safari"
                      >苹果</ph-menu-item
                    >
                    <ph-menu-item
                      action="internet-explorer"
                      icon="internet-explorer"
                      >微软</ph-menu-item
                    >
                  </ph-sub-menu>
                  <ph-menu-item action="firefox" icon="firefox"
                    >火狐</ph-menu-item
                  >
                  <ph-menu-item action="safari" icon="safari"
                    >苹果</ph-menu-item
                  >
                  <ph-menu-item
                    action="internet-explorer"
                    icon="internet-explorer"
                    >微软</ph-menu-item
                  >
                </ph-menu>
              </ph-aside>
              <ph-aside>
                <ph-menu theme="primary" :current="current" @action="onAction">
                  <ph-sub-menu title="浏览器">
                    <ph-menu-item action="chrome" icon="chrome"
                      >谷歌</ph-menu-item
                    >
                    <ph-menu-item action="firefox" icon="firefox"
                      >火狐</ph-menu-item
                    >
                    <ph-menu-item action="safari" icon="safari"
                      >苹果</ph-menu-item
                    >
                    <ph-menu-item
                      action="internet-explorer"
                      icon="internet-explorer"
                      >微软</ph-menu-item
                    >
                  </ph-sub-menu>
                  <ph-menu-item action="firefox" icon="firefox"
                    >火狐</ph-menu-item
                  >
                  <ph-menu-item action="safari" icon="safari"
                    >苹果</ph-menu-item
                  >
                  <ph-menu-item
                    action="internet-explorer"
                    icon="internet-explorer"
                    >微软</ph-menu-item
                  >
                </ph-menu>
              </ph-aside>
              <ph-aside>
                <ph-menu theme="success" :current="current" @action="onAction">
                  <ph-sub-menu title="浏览器">
                    <ph-menu-item action="chrome" icon="chrome"
                      >谷歌</ph-menu-item
                    >
                    <ph-menu-item action="firefox" icon="firefox"
                      >火狐</ph-menu-item
                    >
                    <ph-menu-item action="safari" icon="safari"
                      >苹果</ph-menu-item
                    >
                    <ph-menu-item
                      action="internet-explorer"
                      icon="internet-explorer"
                      >微软</ph-menu-item
                    >
                  </ph-sub-menu>
                  <ph-menu-item action="firefox" icon="firefox"
                    >火狐</ph-menu-item
                  >
                  <ph-menu-item action="safari" icon="safari"
                    >苹果</ph-menu-item
                  >
                  <ph-menu-item
                    action="internet-explorer"
                    icon="internet-explorer"
                    >微软</ph-menu-item
                  >
                </ph-menu>
              </ph-aside>
              <ph-aside>
                <ph-menu theme="danger" :current="current" @action="onAction">
                  <ph-sub-menu title="浏览器">
                    <ph-menu-item action="chrome" icon="chrome"
                      >谷歌</ph-menu-item
                    >
                    <ph-menu-item action="firefox" icon="firefox"
                      >火狐</ph-menu-item
                    >
                    <ph-menu-item action="safari" icon="safari"
                      >苹果</ph-menu-item
                    >
                    <ph-menu-item
                      action="internet-explorer"
                      icon="internet-explorer"
                      >微软</ph-menu-item
                    >
                  </ph-sub-menu>
                  <ph-menu-item action="firefox" icon="firefox"
                    >火狐</ph-menu-item
                  >
                  <ph-menu-item action="safari" icon="safari"
                    >苹果</ph-menu-item
                  >
                  <ph-menu-item
                    action="internet-explorer"
                    icon="internet-explorer"
                    >微软</ph-menu-item
                  >
                </ph-menu>
              </ph-aside>
              <ph-aside>
                <ph-menu theme="warning" :current="current" @action="onAction">
                  <ph-sub-menu title="浏览器">
                    <ph-menu-item action="chrome" icon="chrome"
                      >谷歌</ph-menu-item
                    >
                    <ph-menu-item action="firefox" icon="firefox"
                      >火狐</ph-menu-item
                    >
                    <ph-menu-item action="safari" icon="safari"
                      >苹果</ph-menu-item
                    >
                    <ph-menu-item
                      action="internet-explorer"
                      icon="internet-explorer"
                      >微软</ph-menu-item
                    >
                  </ph-sub-menu>
                  <ph-menu-item action="firefox" icon="firefox"
                    >火狐</ph-menu-item
                  >
                  <ph-menu-item action="safari" icon="safari"
                    >苹果</ph-menu-item
                  >
                  <ph-menu-item
                    action="internet-explorer"
                    icon="internet-explorer"
                    >微软</ph-menu-item
                  >
                </ph-menu>
              </ph-aside>
            </ph-flex>
          </ph-tab-panel>
          <ph-tab-panel title="template">
            <ph-pretty>
              {{ demo2 }}
            </ph-pretty>
          </ph-tab-panel>
          <ph-tab-panel title="基本介绍">
            <ph-pretty>{{ style2 }}</ph-pretty>
          </ph-tab-panel>
        </ph-tab>
      </ph-tab-panel>
      <ph-tab-panel title="树模式">
        <template v-slot:default="props">
          <ph-tab v-show="props.active">
            <ph-tab-panel title="基本demo">
              <ph-aside>
                <ph-menu-tree
                  :current="current1"
                  :trees="trees"
                  @action="onAction1"
                ></ph-menu-tree>
              </ph-aside>
            </ph-tab-panel>
            <ph-tab-panel title="template">
              <ph-pretty style="margin-left: 1rem">
                {{ demo1 }}
              </ph-pretty>
            </ph-tab-panel>
            <ph-tab-panel title="基本介绍">
              <ph-pretty style="margin-left: 1rem">
                {{ style1 }}
              </ph-pretty>
            </ph-tab-panel>
          </ph-tab>
        </template>
      </ph-tab-panel>
      <ph-tab-panel title="菜单组非树模式">
        <template v-slot:default="props">
          <ph-aside v-show="props.active">
            <ph-menu :current="current" @action="onAction">
              <ph-menu-group title="浏览器">
                <ph-menu-item action="chrome" icon="chrome">谷歌</ph-menu-item>
                <ph-menu-item action="firefox" icon="firefox"
                  >火狐</ph-menu-item
                >
                <ph-menu-item action="safari" icon="safari">苹果</ph-menu-item>
                <ph-menu-item
                  action="internet-explorer"
                  icon="internet-explorer"
                  >微软</ph-menu-item
                >
              </ph-menu-group>
              <ph-menu-group title="浏览器">
                <ph-menu-item action="firefox" icon="firefox"
                  >火狐</ph-menu-item
                >
                <ph-menu-item action="safari" icon="safari">苹果</ph-menu-item>
                <ph-menu-item
                  action="internet-explorer"
                  icon="internet-explorer"
                  >微软</ph-menu-item
                >
              </ph-menu-group>
            </ph-menu>
          </ph-aside>
          <ph-pretty>
            {{ groupTemplate }}
          </ph-pretty>
        </template>
      </ph-tab-panel>

      <ph-tab-panel title="script">
        <ph-pretty>{{ script }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  PhMenuTree,
  PhMenuGroup,
  PhMenu,
  PhMenuItem,
  PhSubMenu,
  PhAside,
  PhTabPanel,
  PhTab,
  PhFlex,
  PhBlockquote,
  PhView,
} from "@/index";
import * as Data from "../data/menu";
import { TreeNode } from "@/components/menu/struct";
export default defineComponent({
  components: {
    PhMenuTree,
    PhMenuGroup,
    PhMenu,
    PhMenuItem,
    PhSubMenu,
    PhAside,
    PhTabPanel,
    PhTab,
    PhFlex,
    PhBlockquote,
    PhView,
  },
  setup() {
    const current = ref("chrome");
    const current1 = ref("");
    const paths = ref<Array<TreeNode>>([]);
    const trees = [
      {
        title: "浏览器",
        children: [
          {
            title: "谷歌",
            icon: "chrome",
            action: "chrome",
          },
          {
            title: "火狐",
            icon: "firefox",
            action: "firefox",
          },
          {
            title: "苹果",
            icon: "safari",
            action: "safari",
          },
          {
            title: "IE",
            icon: "internet-explorer",
            action: "internet-explorer",
          },
        ],
      },
      {
        title: "火狐",
        icon: "firefox",
        action: "firefox",
      },
      {
        title: "苹果",
        icon: "safari",
        action: "safari",
      },
      {
        title: "IE",
        icon: "internet-explorer",
        action: "internet-explorer",
      },
    ];
    const onAction = (a: string, paths1: Array<TreeNode>) => {
      current.value = a;
      console.log(paths1);
      paths.value = paths1;
    };
    const onAction1 = (a: string, paths1: Array<TreeNode>) => {
      current1.value = a;
      console.log(paths1);
      paths.value = paths1;
    };
    return { trees, current, current1, onAction, onAction1, paths, ...Data };
  },
});
</script>
